<template>
<div>
	<my-header></my-header>

	<div class="container">
		<div class="page-title-normal">
			<h2 class="page-title-h2"><span>check out</span></h2>
		</div>
		<!-- 进度条 -->
		<div class="check-step">
			<ul>
				<li class="cur"><span>Confirm</span> address</li>
				<li class="cur"><span>View your</span> order</li>
				<li class="cur"><span>Make</span> payment</li>
				<li class="cur"><span>Order</span> confirmation</li>
			</ul>
		</div>

		<div class="order-create">
			<div class="order-create-pic"><img src="/static/ok-2.png" alt=""></div>
			<div class="order-create-main">
				<h3>Congratulations! <br>Your order is under processing!</h3>
				<p>
					<span>Order ID：{{orderId}}</span>
					<span>Order total：{{orderTotal | currency("¥")}}</span>
				</p>
				<div class="order-create-btn-wrap">
					<div class="btn-l-wrap">
						<!-- <a class="btn btn--m">Cart List</a> -->
						<router-link class="btn btn--m" :to="{ name: 'Cart', params: {} }">Cart List</router-link>
					</div>
					<div class="btn-r-wrap">

						<router-link class="btn btn--m" :to="{ name: 'GoodList', params: {} }">Goods List</router-link>

					</div>
				</div>
			</div>
		</div>
	</div>
	<my-footer></my-footer>
</div>
</template>
<script>
import MyHeader from "@/components/Header"
import MyFooter from "@/components/Footer"
import MyBread from "@/components/Bread"
import MyModal from "@/components/Modal"
export default {
	components: {
		MyHeader,
		MyFooter,
		MyBread,
		MyModal
	},
	data() {
		return {
			orderId: '',
			orderTotal: 0
		}
	},
	mounted() {
		let orderId = this.$route.query.orderId
		if (!orderId) {
			return
		}
		this.$http.get('/api/user/orderDeatail', {
			params: {
				orderId
			}

		}).then((response) => {
			let res = response.data
			if (res.status == "0") {
				this.orderId = orderId
				this.orderTotal = res.result.orderTotal
			}
		})
	}
}
</script>
